SLIDES FOR 
THEORY LECTURES 


(UN I SKIP THEM, IHET ARE SUPER 
MPURIANI &) 
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BE [ABLE Or CONTENTS: THEORY LECTURES (CLICK IAE TITLES) 

















Së Watch before you start! Summary: Which Data Structure to Use? 37 How the Web Works: Requests and Responses 


B A Brief Introduction to JavaScript First-Class and Higher-Order Functions 38 Promises and the Fetch API 


Data Types Closures 39 Asynchronous Behind the Scenes: The Event Loop 


Boolean Logic Data Transformations: map, filter, reduce 40 An Overview of Modern JavaScript Development 


JavaScript Releases: ES5, ES6+ and ESNext Summary: Which Array Method to Use? a An Overview of Modules in JavaScript 


42 Modern, Clean and Declarative JavaScript Programming 





Functions Calling Other Functions How the DOM Really Works 


Reviewing Functions Event Propagation: Bubbling and Capturing 43 Forkify: Project Overview and Planning 


Learning How to Code Efficient Script Loading: defer and async 44 The MVC Architecture 


How to Think Like a Developer What Is Object-Oriented Programming? 45 Event Handlers in MVC: Publisher-Subscriber Pattern 


Debugging (Fixing Errors) OOP in JavaScript 46 Forkify Project: Final Considerations 








What's the DOM and DOM Manipulation Prototypal Inheritance and The Prototype Chain 


An high-level Overview of JavaScript Object.create 





The JavaScript Engine and Runtime Inheritance Between "Classes": Constructor Functions 


Execution Contexts and The Call Stack Inheritance Between "Classes": Object.create 


Scope and The Scope Chain ES6 Classes summary 


Variable environment: Hoisting and The TDZ Mapty Project: How to Plan a Web Project 


® The thıs Keyword Mapty Project: Final Considerations 


18 Primitives vs. Objects (Primitive vs. Reference Types) Asynchronous JavaScript, AJAX and APIs 





WELCOME, WELCOME, 
WELCOME! 





SEL ON 
WELCOME, WELCOME, WELCOME! 
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SOME QUICK CONSIDERATIONS BEFORE WE START... :7 





d This course is for all of you! So please don't write a bad review right away If the course Is too easy, or too hard, or 
progressing too slow, or too fast for you. To make It perfect for YOU, you can rewatch lectures, jump to other sections, 


watch the course with slower or faster playback speed, or ask questions. 


Awful, not what l expected at all 


* 


Too easy! Only for beginners! @ 





III 
> 3 C, 0:00/1:05 





Please dont be that person. 
Everyone is different... 
(Unless the course itself is truly terrible) 


SOME QUICK CONSIDERATIONS BEFORE WE START... :7 





ġa You need to code along with mel You will learn ZERO JavaScript skills by just sitting and watching me code. You have to 
code YOURSELF! 





SOME QUICK CONSIDERATIONS BEFORE WE START... +7 





e» Try all the coding challenges! Try to do your best, but if you get stuck for too long, watch the solution. Don't beat yourself 
up if you cant figure it out! Just rewatch the lectures that were covered in the challenge, try to understand them better, 


and move on. 





PAUSE THE VIDEO 
FOR CHALLENGE 


SOME QUICK CONSIDERATIONS BEFORE WE START... +7 








If you want the course material to stick, take notes. Notes on code syntax, notes on theory concepts, notes on everything! 
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SOME QUICK CONSIDERATIONS BEFORE WE START... +7 








Q If this is your first time ever programming, please dont get overwhelmed. It's 100% normal that you will not understand 


everything at the beginning. Just dont think “I guess coding is not for me”! 


YOU CAN DO IT * 





(WE KNOW YOU CAN 


nafs com ve 


SUME QUICK CONSIDERATIONS BEFORE WE START... 





e In the first sections of the course, dont bother understanding WHY things work the way they do in JavaScript. Also, dont 
stress about efficient code, or fast code, or clean code. While learning, we just want to make things WORK. We will 


understand the WHY later in the course. 


MY CODEDOESNIIWORK Le F 


| HAVE NC IDEA WHY 









LEV NO: Tn WAY 





SOME QUICK CONSIDERATIONS BEFORE WE START... „” 





A 


Before moving on from a section, make sure that you understand exactly what was covered. Take a break, review the code 


we wrote, review your notes, review the projects we built, and maybe even write some code yourself. 
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document. querySelector('.check').addEventListener('click 


LC Mu Humb r 
Number (document. querySelector('.guess').value) Lema | um EF E 
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SOME QUICK CONSIDERATIONS BEFORE WE START... +7 





12 If you have an error or a question, start by trying to solve It yourself! This is essential for your progress. If you cant solve 


it, check the Q&A section. If that doesnt help, just ask a new question. Use a short description, and post relevant code. 





All lectures v Sort by most recen t v Filter questions 





SOME QUICK CONSIDERATIONS BEFORE WE START... :7 








- | recorded this course on a Mac, but everything works the exact same way on Windows or Linux. If something doesnt 


work on your computer, it's NOT because youre using a different OS. 





SOME QUICK CONSIDERATIONS BEFORE WE START... +7 








ev Most importantly, have fun! It's so rewarding to see something that YOU have built YOURSELF! So if you re feeling 


frustrated, stop whatever you're doing, and come back later! 


y And I mean REAL fun @ 
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WHAT IS JAVASCRIPT? 





We dont have to worry about complex 
stuff like memory management 





JAVASC RI PI IS A H | G H-LEVEL, We can use different stvles 
| — OO a of programming 
ee objects, for " OBJECT-ORIEN TED, MULI l-PARADIGM 
PROGRAMMING LANGUAGE. &$ 


NG Instruct computer to do things 





Int ROLE OF JAVASCRIPT IN WEB DEVELOPMENT 





CONTENT NOUNS 


<p></p> 


means ‘paragraph 





VERBS 





a 


p.hide(); 


I 


PRESENTATION 


JS 





means ‘hide the 
paragraph' 





PROGRAMMING LANGUAGE: 
BUILDING WEB APPLICATIONS 








EAAMPLE OF DYNAMIC EFFECTS / WEB APPLICATION 





Home 


Explore 


t © « 


Notifications 


9 
A 


Messages 
Show spinner + loading 
data in the background 


Bookmarks 





[=] Lists 


Profile 





More 


Show tweet box O 


after clicking 


Display tweets after 
loading data 







Jonas Schmedtmann 


1,317 Tweets 


< O Search Twitter 













Node.js, Expr TTT 
CODING COURSES IN JONAS.IO Node.js, Exp Complete Boc ET — 


DONE RIGHT. TAI n a 
ëmmer === Display user info on 
hover 


— ` 
E n de 
A LI 


EN 


Show spinner + loading 
data in the background 





Jonas Schmedtmann 


@jonasschmedtman 
loper. Designer. Online teacher. 
© Algarvé®Regrtugal «$? jonas.io Joined May 2010 


37 Following 19. ollowers 


Tweets Twėkis & replies Media Likes 


Show data after loading 


Terms Privacy policy Cookies info Morev 


© 2019 Twitter, Inc. 


THERE lo NOTHING YOU CAN T DO WITH JAVASCRIPT (WELL, ALMOST...) 





"un Front-end apps a Back-end apps 
Dynamic effects and 


/L web applications in the "P 


: web servers 
browser ze 
THIS COURSE 


NL- 100% based on JavaScript. They might 


go away, but JavaScript wont! 





Native mobile Native desktop 
applications applications 


JS Kap (e) IONIC JS 





JAVASCRIPT RELEASES... (MORE ABOUT THIS LATER) 





Biggest update to the New updates to JS 


ma language EVER every single year 


Modern JavaScript 





ECMAScript 





dh Learn modern JavaScript from the beginning, but without forgetting the older parts! 


t3 Let's finally get started! 
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OBJECTS AND PRIMITIVES 











Ye ELSE 





firstName 
age 


The 7 PRIMITIVE DATA TYPES 








1. 





Number. Floating point numbers « Used for decimals and integers let age = 25; 


2. String: Sequence of characters & Used for text 


3. Boolean: Logical type that can only be true or false & Used for taking decisions 











4. Undefined: Value taken by a variable that is not yet defined (empty value‘) 


5. Null: Also means empty value 
6. Symbol (ES2015): Value that is unique and cannot be changed [Not useful for now] 


7. Bigint (ES2020): Larger integers than the Number type can hold 


& JavaScript has dynamic typing: We do not have to manually define the data type of 
the value stored In a variable. Instead, data types are determined automatically. 


NU Value has type, NOT variable! 
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BASIC BOOLEAN LOGIC: THE AND, OR & NOT OPERATORS 





A AND B A OR B NOT A, NOT B 


"Sarah has a drivers license "Sarah has a drivers license å 


AND good vision” OR good vision” 
Possible values Inverts true/false value 


A A 
Å 
TRUE | TRUE J FALSE TRUE | TRUE | TRUE 
FALSE | FALSE | FALSE FALSE | TRUE | FALSE 


true when ALL are true true when ONE is true V OEE Varuli Olah Can 


B, be either TRUE or FALSE 
NL No matter how many variables 

















Results of 
operation, 
depending on 
2 variables 


< EXAMPLE: 


A: Sarah nas a drivers license 


B: Sarah has good vision 


AN EXAMPLE @ 








BOOLEAN VARIABLES 16 





A 
wo TRUE (FALSE 


TRUE | TRUE FALSE 
LET S USE OPERATORS! FALSE | FALSE | FALSE 


G JA true 
false 
À 

EI TRUE | FALSE 

s IA AND B true TRUE | TRUE | TRUE 
true true 
<= A OR IB false FALSE | TRUE | FALSE 
false false 


& A: Age Is greater or equal 20 false 





“ B: Age ıs less than 30 true 














< A AND B false 


false true 





< A OR B true 


false true 
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A BRIEF HISTORY OF JAVASCRIPT 





1995 


1996 


1997 





2009 


2015 


2016 — oo 

















Brendan Eich creates the very first version of JavaScript in just 10 days. It was called 
Mocha, but already had many fundamental features of modern JavaScript! 


Mocha changes to LiveScript and then to JavaScript, In order to attract Java developers. 
However, JavaScript has almost nothing to do with Java & 


Microsoft launches IE, copying JavaScript from Netscape and calling it JScript; 


With a need to standardize the language, ECMA releases ECMAScript 1 (ES1), the first official 
standard for JavaScript (ECMAScript is the standard, JavaScript the language In practice); 


ES5 (ECMAScript 5) is released with lots of great new features: 
FS6/ES2015 (ECMAScript 2015) was released: the biggest update to the language ever! 


ECMAScript changes to an annual release cycle in order to ship less features per update A 





Release of ES201 6 / ES2017 / ES2018 / ES2019 / ES2020 / ES2021 / ... / ES2089 Y 





BACKWARDS COMPATIBILITY: DON T BREAK The WEB! 





| 





«E 
o add ( Å -— Modern JavaScript 
| ` l Engine 
BACKWARDS 


+ Old features are never removed: 


DON'T BREAK THE WEBI < Not really new versions, just 
incremental updates (releases) 


= Websites keep working forever! 





T 






Modern JavaScript 
Engine 


c int add n 





v 
NOT BORWARDS 


JOMPATIB 


2020 2089 


MOW 10 USE MODERN JAVASCRIPT TODAY 





rs l-impenn E "zl 
—~ = SII "BEE mem mm EE EEES 

" E KI 
& During development: Simply use the latest Google Chrome! == [: BEB Bor: EE 


Bebe / 
Ire ` | Ss ? 
cores core 


urent 
vrome 








l E 
å mares D 
2017 misc 
es | 
zn KIK m SOS 
= oo 





^? During production: Use Babel to transpile and polyfill your code (converting 


MA ŽŽ mt 
pack to ES5 to ensure browser compatibility for all users). == ha o 
= 








http://kangax.github.io/compat-table 


= Fully supported in all browsers (down to IE 9 from 2011); 
Z- Ready to be used today «E 





= ES6+: Well supported in all modern browsers; 


= No support in older browsers; 





< Can use most features in production with transpiling and polyfilling Y 


= ESNext: Future versions of the language (new feature proposals that reach Stage 4); 





& Can already use some features in production with transpiling and polyfilling. 
(As of 2020) 





R Will add new videos 


MODERN JAVASCRIPT FROM The BEGINNING 





dh Learn modern JavaScript from the beginning! 


a But, also learn how some things used to be done before modern JavaScript 
(e.g. const & Let vs var and function constructors vs ES6 class). 


3 reasons why we should not forget the Good Ol’ JavaScript: 





= You will better understand how JavaScript actually works; 
& Many tutorials and code you find online today are still in ES5; 


& When working on old codebases, these will be written In ES5. 
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CALLING A FUNCTION INSIDE A FUNCTION: DATA FLOW 


const cutPieces = function (fruitiwi 


return a A 
t; o 


const fruitProcesso 











apples å oranges) Å 


vo 


const applePieces = cutPiefes(apples)f 
const VER ieces(oranges): o 
const juice = Julle=wi »applePieces) piéces of 
apple and StorangePieceb) pieces of orangé. 


return juice; o 


- functio 














5 
Å 


Lë 





console.log (fruitProcessor[2] BI ; 
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FUNCTIONS REVIEW: 3 DIFFERENT FUNCTION TYPES 





Function declaration | 
calcAge(birthYear) 4 


return 2037 - birthYear 
H 


Function that can be 
used before it's declared 


calcAge (birthYear) į 





Function expression 


return 2037 birthYear 


Essentially a function 
value stored in a variable 


birthYear => 2057 - birthYear 





Arrow function 





Great for a quick one-line 
functions. Has no this 


keyword (more later...) Three different ways of writing functions, but they all work ina 


similar way: receive input data, transform data, and then output data. 


E HI IR | PAM | AN F TA — Gr 
| A Y | Á 4 ES Y A Å 1 mum | ees | TÁ di 4 Å 1 Å Y Å 74 po X M Y | | 
V Y | [| AN | || ĦA NA III AN AN AN Å 
| | NW ||| | | | | A? | | | 1 | | | BE ANA NN 
Å \ | TI i M Å M | EE N Y Y AN 1 \ ! i | 
| WW. J] WW j J) | IUJ N | IU BI || YI 





Parameters: placeholders to receive input 


| | | Function body: block of code that 
values. Like local variables of a function 


Function name we want to reuse. Processes the 


NSG \ function's input data 


function calcAge(birthYear, firstName) į 


return statement to l const age — 2057 = birthYear; 


output a value from console.log( SifirstName; is Stage) years old ); 


the function and l 
| . return age; 
terminate execution 


ila 





const age = calcAge([1991, 'Jonas' D-— Calling, running or invoking 


Wa N the function, using () 


Variable to save returned Arguments: actual values 
value (function output) of function parameters, to 
input data 
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HOW TO FAIL % AT LEARNING HOW TO CODE 








John 
(not actuallv...) 


X X 


X X X X X X 


He didn't have a clear goal at the beginning of his journey 


He started by watching courses and reading tutorials, but he would just copy the 
code without caring how It works. Sometimes he would just copy and paste code! 


He didn't reinforce what he was learning by doing small challenges or taking notes 
He didnt practice coding, and didnt come up with his own project ideas 

He quickly became frustrated when his code was not perfectly clean or efficient 
He lost motivation because he thought he could never know everything 

He was learning In isolation 


After finishing a couple of courses, he thought he now was a web developer and 
could start applying to jobs. But he couldnt even build an app on his own! 


HOW TO SUCCEED >: AT LEARNING HOW TO CODE 


HTML 











+ 


E] E us <> V nede @ 





He didnt have a clear goal at 
the beginning of his journey 


y FIX 


Set a specific, measurable, 





realistic and time-based goal 


Know exactly why you are 
learning to code: Switching 
careers? Finding a better job? 


Imagine a big project you 
want to be able to build! 


Research technologies you 
need and then learn them 








He would just copy the code 
without caring how it works. 
Sometimes he would just 
copy and paste code! 


y FIX 


Understand the code that 
you re studying and typing 





Always type the code, dont 
copy-paste! 

















34 He didn't reinforce what he 
was learning by doing small 
challenges or taking notes 


y FIX 


After you learn a new feature 
or concept, use It immediately 


Take notes 


Challenge yourself and 
practice with small coding 
exercises and challenges 


E 


Dont be in a hurry to 
complete the course fast! 





0 codewars [55 


PAUSE THE VIDEO 
FOR CHALLENGE 





He didn't practice coding, and 
didn't come up with his own 
project ideas 


y FIX 


Practicing on your own Is the 
most important thing to do 





This is NOT optional! Without 
practice outside of courses, 
you wont go anywhere! 


Come up with your own 
project ideas or copy popular 
sites or applications, or just 
parts of them in the beginning 


Dont be stuck in “tutorial hell” 








HOW TO SUCCEED $= AT LEARNING HOW TO CODE 


He quickly became frustrated 
when his code was not 
perfectiv clean or efficient 


y FIX 


Dont get stuck trying to write 
the perfect code! 





Just write tons of code, no 
matter the quality! 


Clean and efficient code will 
come with time 


You can always refactor code 
later 





34 He lost motivation because he 








thought he could never know 
everything 


y FIX 


Embrace the fact that you will 
never you know everything 


Just focus on what you need 
to achieve your goal! 


getify 
@getify 


20+ yrs dev exp, 8 books w/ 100k+ copies sold, 300k+ hours 
watched of my videos, 4k+ taught in person... 


And you know what? | still struggle to get mv code to work and 
it's still a tedious slog. And my code still confuses me the next 


day. 


You're not alone in these struggles. 


© 6,015 3:33 PM - Mar 10, 2018 


HOW TO SUCCEED ¿> AT LEARNING HOW TO CODE 





34 He was learning in isolation 34 After finishing a couple of 


y FIX 


de Explain new concepts to other 
people. If you can explain it, y FIX 
you truly understand it! 


courses, he thought he now 
was a web developer and 





could start applying to jobs 





de The biggest misconception 


“= Share your goals to make that people have! 


yourself accountable 


de Courses are an amazing NEXT SLIDE 


> Str JA Rag progress starting point, but are only the es: 
with the web dev community 


(#100DaysOfCode, YY 
#CodeNewbie, #webdev, etc.) 





beginning of your journey! 





LEARNING HOW 10 CODE IS HARD, BUT YOU CAN DO IT! 





Study courses: understand code, take 
challenges and notes 


y 











Everything Stay motivated! Keep writing lots of 
! IS awesome y H 9 
| | JOB READY code on your own, no matter how bad 
Cliff of 
| confusion 





y 


Learn with other people, devs and 
beginners, and share progress 


y 


Keep challenging yourself, run into lots 
of problems, and fix them 


y 


Round up your skillset with best 
practices and tools (git, testing, …) 


y 





Pit of | 
' despair 








 Backto 
awesome 





Confidence | 





ki 








Competence | 


Youre probably 
somewhere here 








Source: https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/ 
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HOW TO FAIL % AT SOLVING PROBLEMS 








John can 
code now & 





< Example: /n an array of 
GPS coordinates, find 
the two closest points 


WHENEVER JOHN ENCOUNTERS A PROBLEM: 


3X He jumps at the problem without much thinking 
3< He implements his solution in an unstructured way 
3 He gets stressed out when things don't work 


34 He is too proud to research solutions 


y FIX 


Stay calm and slow down, dont just jump at a problem without a plan 











Take a very logical and rational approach (programming is just logic, in the end...) 





Use my 4-step framework to solve any problem 
NEXT SLIDE 


4 STEPS 10 SOLVE ANY PROBLEM 





EXAMPLE 


„ Project Manager. “We need a function 
that reverseslwhateverjwe pass into It” 





< What does whatever even mean in this context? 
What should be reversed? Answer. Only strings, 
numbers, and arrays make sense to reverse... 





< What to do if something else Is passed in? 


— What should be returned? Should it always be a 
String, or should the type be the same as passed In? 


«= How to recognize whether the argument Is a number, 
a string, or an array? 


< How to reverse a number, a string, and an array? 


4 STEPS 10 SOLVE ANY PROBLEM 





EXAMPLE 


„ Project Manager. “We need a function 
that reverses whatever we pass into it” 





2 SUB-PROBLEMS: 





«= Check tf argument is a number, a string, or an array 





< Implement reversing a number 
< Implement reversing a string 

< Implement reversing an array 
pn 


Return reversed value 


NM Looks like a task list that we 


need to implement 


4 STEPS 10 SOLVE ANY PROBLEM 





Make sure you 100% understand the 
1 problem. Ask the right questions to get 
a clear picture of the problem 


M 


Divide and conquer: Break a big 
problem into smaller sub-problems. 


y 


Dont be afraid to do as much 
research as you have to 











EXAMPLE 


„ Project Manager. “We need a function 
that reverses whatever we pass into it” 


3 <- How to check if a value is a number in JavaScript? 
< How to check if a value is a string in JavaScript? 
+ How to check if a value is an array in JavaScript? 
& How to reverse a number in JavaScript? 
— How to reverse a string in JavaScript? 


27 How to reverse an array in JavaScript? 


N 
> stackoverflow + MDN web docs 





Google 





4 STEPS 10 SOLVE ANY PROBLEM 





EXAMPLE 
Make sure you 100% understand the 


1 problem. Ask the right questions to get 
that reverses whatever we pass into It 


Divide and conquer: Break a big 
problem into smaller sub-problems. 


y 


Dont be afraid to do as much i 
3 1f value type == number 
research as you have to 


+ 


For bigger problems, write pseudo-code 
before writing the actual code 








A function reverse(value) 
if value type !string 88 !number && larrav 


return value 





if value type == string 


reverse string 


reverse number 


if value type == array 





reverse array 


I 


return reversed value 


SEL TION 
JEVELUPER SKILLS & EDITOR SETUP 


LEG | URE 
JEBUGGING (FIXING ERRŪRS) 
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WHAT 15 A SOFTWARE BUG? 





Software bug: Defect or problem In a computer program. 
Basically, any unexpected or unintended behavior of a 





computer program Is a software bug. 


< Bugs are completely normal in software development! 


Z- Previous example: “We need a function that reverses whatever 


we pass Into it” 


reverse((1, 3, 5, 71) 


v 


[5, 1, 7, 3] 


Unexpected result: the array 
Is scrambled, NOT reversed. 


s So there is a bug in the 
reverse function % 








27 Debugging: Process of finding, fixing and preventing bugs. 


—— o 





0 sw On Aa Aak) us 2700 7.032 yy7 0:5 
/ 200 d oppd — dem. wa 9.087 yG FPS 
13 ve (032) MP -A^C EN 7-6/5 72505: 
63) PRO 2. ldoyreyis 
Cow k Kata 13087095 
CIS  b-2 "ml 033 


1 L4 1 4. 
1/90 Started En P" lap cl chest] 
IS 25 diel EN Aide. Test. 


Va fo Qa a ISB 


(moti) in fe lag, > 


TEE of bug being found. 






A real bug which was 


causing an error in Harvards 


computer in the 1940s 


The DEBUGGING PROCESS 





l Isolating where 
Becoming aware 


a that there Is a bug "a nz LANGE he Dug a happening again 


EE > l. ^ EN 


«= During development & Developer console “ Replace wrong = Searching for the 


Preventing it from 








| (simple code) solution with new same bug in similar 
< Testing software | 

correct solution code 
Z- Debugger (complex 


code) Z- Writing tests using 
testing software 


Z- User reports during 
production 





Context: browsers, 
users, etc. 


JAVASCRIPT IN THE 
BROWSER: DOM AND 

EVENTS 
FUNDAMENTALS 











DEL TION 


JAVASCRIPT IN THE BRÜWSER: DOM 
AND EVENTS FUNDAMEN TALS 


LEG TURE 


WHAL > IHE DOM AND UUM 
MANIPULAHUN 


€ JONASSCHMED I MAN 








WHAT 15 THE DOM? 





Tree structure, generated 


by browser on HTML load N 
DOM 


DOCUMENT OBJECT MODEL: STRUC TURED 
REPRESENTATION OF HTML DOCUMENTS. ALLOWS 
JAVASCRIPT IO ACCESS HTML ELEMENTS AND 
STYLES TO MANIPULATE THEM. 





Change text, HTML attributes, 
and even CSS styles 


The DOM TREE STRUCTURE 





T Special object that is the entry 
DOCUMENT point to the DOM. Example: 


| document.querySelector() 


ELEMENT + 








A Simple Page || 


<html> 


1 


ELEMENT ELEMENT 41 














<head> <body> 
A paragraph with a link ELEMENT ELEMENT ELEMENT 
<title> <section> <section> 


A second paragraph 


“A Simple Page” <p> <p> <img> 


| —à TEXT ELEMENT ELEMENT ELEMENT KA 


srcs'dom.png' alt-'The DOM | 


TEXT TEXT 
“A paragraph ” “A second para...” 


DOM !== JAVASCRIPT @ 





DOM Methods and 





JS 


Secma 


NTERNATIONA 





Properties for DOM 
METE 





SN For example 


document.querySelector() 


API: Application Programming Interface 


WEB APIs DOM Methods and 
Properties E 








JS 





CAN INTERACT 
WITH 





HOW JAVASCRIPT 
WORKS BEHIND THE 


SCENES 
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WHAT IS JAVASCRIPT: REVISITED 


AM ASCRIP I 





JAVASCRIPT ISA HIGH-LEVEL, 
OBJEC l-ORIEN TED, MULI l-PARADIGM 
PROGRAMMING LANGUAGE. 





WHAT 15 JAVASCRIPT: REVISITED 





JAVASCRIPT IS AHIGĦ-LEVELIPROTOTVPE-BASED OBJEC I-ORIEN TED 


MULI l-PARADIGM JINTERPRETED OR JUS T-IN- TIME COMPILED 
DYNAMICIISINGLE- T HREADEDIIGARBAGE-COLLEC E EDIPROGRAMM!IN(G 


LANGUAGE WITHIFIRST-CLASS FUNCTIONSIAND A NON-BLOCKING 
EVENT LOOP CONCURRENCY MODEL © & 632 








DEGONS [RUC TING THE MONSTER DEFINITION 





High-level 


Garbage-collected 


Interpreted or just-in-time compiled 


Multi-paradigm 


Prototype-based object-oriented 


First-class functions 


Dynamic 


Single-threaded 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 





Garbage-collected 





< Any computer program needs resources: 


Interpreted or just-in-time compiled 


Multi-paradigm 


Prototype-based object-oriented 


First-class functions 





Dynamic 
LOW-LEVEL HIGH-LEVEL 


Single-threaded 
Developer has to manage Developer does NOT have 


| resources manually to worry, everything 
Non-blocking event loop happens automatically 


DEGONSTRUCTING THE MONSTER DEFINITION 









Interpreted or just-in-time compiled 






Multi-paradigm 


NW Cleaning the memory 


Prototype-based object-oriented so we dont have to 





First-class functions 


Dynamic 


Single-threaded 


Non-blocking event loop 


DEGONSTRUCTING THE MONSTER DEFINITION 





High-level 


NW Abstraction over 


Os and Is 


Garbage-collected 





Interpreted or just-in-time compiled 


CONVERT TO MACHINE CODE = COMPILING 


NM Happens Inside the 


JavaScript engine 


Multi-paradigm 





Prototype-based object-oriented 





First-class functions 
Dynamic 
Single-threaded 


More about this Later in this Section 4 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 











& Paradigm: An approach and mindset of structuring code, which will 
direct your coding style and technique. 


The one we've been 


Y using so far 


a Procedural programming 








& Imperative vs. 





2 Object-oriented programming (OOP) | 
Prototype-based object-oriented “Y Declarative 


3 Functional programming (FP) 





First-class functions 
Dynamıc 
Single-threaded 


More about this later in Multiple Sections «<= 


Non-blocking event loop 


DEGONSTRUCTING THE MONSTER DEFINITION 





High-level Prototype 


Arrav 


Arrav.prototvpe.push 
Array.prototype.indexOf 






Garbage-collected 








(Oversimplification!) 


Interpreted or just-in-time compiled 


Multi-paradigm 


Our array Built from prototype 
inherits methods 
Prototype-based object-oriented from prototype "r 
arr 1, 4 
arr.push(4) 
First-class functions has Zero arr indexOf (0) 1 


Dvnamic 


sinġiċ-inreaded More about this in Section Object Oriented Programming <“ 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 





High-level = In a language with first-class functions, functions are simply treated 


as variables. We can pass them into other functions, and return them 


Garbage-collected | 
from functions. 


Interpreted or just-in-time compiled 


Multi-paradigm closeModal = () => 4 Passing a function into another 


modal.classList.add("hidden function as an argument: 
overlay.classList.add( "hidden First-class functions! 


Prototype-based object-oriented | 


overlay.addEventListener("click", closeModal) 





First-class functions 
Dynamic 
Single-threaded 


More about this in Section A Closer Look at Functions <= 


Non-blocking event loop 


DEGONSTRUCTING THE MONSTER DEFINITION 





High-level 


Garbage-collected <= Dynamically-typed language: 


Interpreted or just-in-time compiled No data type definitions. Types 


becomes known at runtime 


Multi-paradigm 
Data type of variable Is 
Prototype-based object-oriented automatically changed 
First-class functions 


Dynamic 


Single-threaded 





Non-blocking event loop 


DEGONS [RUC TING THE MONSTER DEFINITION 





High-level & Concurrency model: how the JavaScript engine handles multiple tasks 
happening at the same time. 


Garbage-collected | Why do we need that? 


Interpreted or just-in-time compiled + JavaScript runs in one single thread, so it can only do one thing at a time. 


Multi-paradigm | So what about a long-running task? 


= Sounds like It would block the single thread. However, we want non-blocking 
Prototype-based object-oriented behavior! 


TR 
First-class functions l How do we achieve that? (Oversimplification!) 


& By using an event loop: takes long running tasks, executes them in the 


Dynamic “background”, and puts them back in the main thread once they are finished. 


Single-threaded 


Non-blocking event loop More about this Later in this Section 4 
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WHAT IS A JAVASCRIPT ENGINE? 





PROGRAM THAT EXECUTES 
JAVASCRIPT CODE. 


Object In 


| memory 
Execution 


context 





= Example: V8 Engine 


Y > © nege CALL STACK HEAP 
a N 


à ^ C= a How Is It Where bur code Where objects 


p | 
compiled: IS executed are stored 








COMPUTER SCIENCE SIDENOTE: COMPILATION VS. INTERPRETATION & 





= Compilation: Entire code Is converted into machine code at once, and written to a binary file that can be executed by a computer. 





_ 1 STEP 2 
COMPILATION. EXECUTION 





NL Can happen way after compilation 


< Interpretation: Interpreter runs through the source code and executes rt line by line. 


Source code 











STEP 1 
EXECUTION LINE BY LINE 


N Code still needs to be converted to machine code 





= Just-in-time (JIT) compilation: Entire code is converted into machine code at once, then executed immediately. 








"D 1 STEP 2 
COMPILATION. EXECUTION 








NOT a portable file f N— Happens immediately 


MODERN JUST =IN= TIME COMPILATION OF JAVASCRIPT 












= AST Example 


js ENGINE 


Happens In special 


threads that we cant mà 


access from code 


Just-in-time 
compilation 





« Happens In 
= 
Call Stack 
\ + During execution! un 





The BIGGER PICTURE: JAVASCRIPT RUN TIME 





ON Nr 
NA 
SI A 
GATEN» $ 






window object 


V Container including all the things 
JS ENGINE that we need to use Ja 


(in this case in the browser 


EVENT LOOP w— Essential for non-blocking concurrency model 


| ) CALLBACK QUEUE 


Name Callback function from DOM event listener 











The BIGGER PICTURE: JAVASCRIPT RUN TIME 








js RUNTIME IN NODE.JS nede 


js ENGINE m 


C++ BINDINGS & 
THREAD POOL 





EVENT LOOP 


| CALLBACK QUEUE 
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WHAT IS AN EXECUTION CONTEXT? 





X Human-readable code: 


name Jonas 


first A 
a 1 
b second 
b 
a 


second()!|Į 


Function body 
only executed 
when called! 





Compilation 


Creation of global execution 
context (for top-level code) 


Execution of top-level code 
(inside global EC) 


Y 


O of functions and 
waiting for callbacks 


Example: click event callback m 





NOT inside 
a function 








EXECUTION 











EXECUTION CONTEXT 


Environment In which a piece of JavaScript 


is executed. Stores all the necessary 
information for some code to be executed. 


= “JavaScript code 






Pizza execution context” 


< Exactly one global execution context (EC): 
Default context, created for code that is not 
inside any function (top-level). 


< One execution context per function: For each 
function call, a new execution context Is created. 


All together make the call stack Å 


EXECUTION CONTEXT IN DETAIL 





Global 


name = ‘Jonas’ 
first = <function> 
second = <function> 
x = <unknown> 


WHAT © INSIDE EXECUTION CONTEXT? 


name = 'Jonas 





A A | 





1 Variable Environment a=1 
| D = second 7. 9) 
let, const and var declarations Sur dt? first() 
Functions return a 
| } _ 
argumerits object ac 
b = <unknown> 


second(x, v) { 


2 Scope chain c= 2 
return cC; 


} 


second() 





3 Th+skeyword 


x = first() 





c = 2 
arguments = (7, 9] 





(Technically, values 
only become known 
during execution) 


The CALL STACK 





Compiled code starts execution 


name = ‘Jonas 


first = () => Į 
a = 1 
b = second(7, 9) 
a=a+b 
return a 


} 


JNIDNA Sf 





second(x, y) { 


return C Global! 


| 





x = first(); CALL STACK 





DEL TION 


UW JAVASCRIPT WORKS BEHIND THE 
SCENES 


LEC TURE 
SLUPE AND IHE SCOPE CHAIN 


@JONASSCHMED I MAN 








SCOPING AND SCOPE IN JAVASCRIPT: CONCEPTS EXECUTION CONTEXT 


< Variable environment 


< this keyword 








+ Scoping: How our programs variables are organized and accessed. Where do variables 
live? or Where can we access a certain variable, and where not?” 


< Lexical scoping: Scoping Is controlled by placement of functions and blocks in the code; 


< Scope: Space or environment in which a certain variable is declared (variable 
environment in case of functions). There is global scope, function scope, and block scope; 


+ Scope of a variable: Region of our code where a certain variable can be accessed. 


The 3 TYPES OF SCOPE 


GLOBAL SCOPE FUNCTION SCOPE BLOCK SCOPE (ESS) 


me = 'Jonas'; calcAge(birthYear) 4 if (year >= 1981 && year <= 1996) 4 

job = 'teacher'; now = 2037; millenial = true 

year = 1989: age = now — birthYear; food = ‘Avocado toast": 
return age; 





+ — Example: if block, for loop block, etc. 


log(millenial): 


log(now) 





Outside of any function or block Variables are accessible only Variables are accessible only 


| | inside function, NOT outside inside block (block scoped) 
Variables declared in globai 


scope are accessible everywhere Also called local scope A HOWEVER, this only applies to 


Let and const variables! 


Functions are also block scoped 
(only in strict mode) 


Int SCOPE CHAIN 





(Considering only 


variable declarations) 
Global scope 


const myName ‘Jonas ; Global abl 
opal Valla ET CN 
myName = “Jonas” 


function first() { 
const age 30; 





A SCOPE CHAIN 


age 30 
cofíst decade 3; 
var millenial true; 


first() scope 


age = 30 
— millennial = true 
— 66 2) 
function second my "ame an Scope has access 


const job Teacher ; 


4 to variables from 
at all outer scopes 





console. log( $#myName? is a $jagef-old $ijob} > 


second() scope 







decade job = “teacher” 


second 






VARIABLE LOOKUP IN SCOPE CHAIN 


age = 30 
millennial = true 


age = 30 
millennial = true 






myName = “Jonas” myName = “Jonas” 


first(); 





SLUPE CHAIN VS. CALL STACK 





a = Jonas 


first() third() EC 


second() EC 


first() EC 


first() 4 
e = ‘Hello! 
second( ) 


second() { 
Hi!’ 


b = “Hello!” 
second = <function> 


third() { 
Hey! 


d + cC +b + a) a = “Jonas” 


first = <function> 
third = <function> 


Global EC 





CALL STACK 


Order in which 
functions were called 










Global scope 


a = “Jonas” 
<function> 
<function> 


first = 
third = 


E 


farst() scope 









b = “Hello!” 
second = <function> 
a = “Jonas” 
first = <function> 
third = <function> 


second() scope 


c = “HI!” 
b = “Hello!” 
second = <function> 


a = “Jonas” 


first = <function> 
third = <function> 


A 


third() scope 





d = “Hey!” 


a = “Jonas” 


first = <function> 
third = <function> 





SCOPE CHAIN 


Order in which functions 
are written in the code 


Has nothing to do 
with order in which 
functions were called! 


SUMMARY $ 





«= Scoping asks the question “Where do variables live? or "Where can we access a certain variable, and where not?” 
< There are 3 types of scope in JavaScript: the global scope, scopes defined by functions, and scopes defined by blocks; 
«= Only let and const variables are block-scoped. Variables declared with var end up in the closest function scope; 


Z- In JavaScript, we have lexical scoping, so the rules of where we can access variables are based on exactly where in the 
code functions and blocks are written; 


Z- Every scope always has access to all the variables from all its outer scopes. This is the scope chain! 


«= When a variable is not in the current scope, the engine looks up in the scope chain until it finds the variable it's looking 
for. This is called variable lookup; 





«= The scope chain is a one-way street: a scope will never, ever have access to the variables of an inner scope; 





«= The scope chain In a certain scope Is equal to adding together all the variable environments of the all parent scopes; 





Z- The scope chain has nothing to do with the order in which functions were called. It does not affect the scope chain at all! 
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OIS TING IN JAVASCRIPT 





& Hoisting: Makes some types of variables accessible/usable in the code before they are EXECUTION CONTEXT 


actually declared. “Variables lifted to the top of their scope”. 
Scope chain 
< this keyword 





Į BEHIND THE SCENES 


Before execution, code is scanned for variable declarations, and for each variable, a new 
property Is created in the variable environment object. 


HOISTED? INITIAL VALUE SCOPE In strict mode. 


a Otherwise: function! 


A 





A 


function declarations 





VES Actual function Block 





VES undefined Function 


Technicallv, ves. But 
not in practice 


var variables 


Let and const variables Q NO <uninitialized>, TDZ Block 


function expressions and arrows vw Depends if using var or let/const PM Ea 


TEMPORAL DEAD ZONE, LET AND CONST 





myName = Jonas 
TEMPORAL DEAD ZONE FOR job VARIABLE 
if (myName === 'Jonas') 4 

console. log( Jonas is a $fjob) ); 

const age = 2037 — 1989; Different kinds of error messages: 

console. log(age); 








WHY MOISTING? 


Using functions before actual declaration; Makes It easier to avoid and catch errors: accessing variables 





WHY 107? 


OS before declaration Is bad practice and should be avoided; 
var hoisting Is just a byproduct. 


Makes const variables actually work 


DEL TION 
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HOW Int This KEYWORD WORKS 





“ this keyword/variable: Special variable that is created for every execution context (every function). EXECUTION CONTEXT 






Variable environment 


Scope chain 


& this is NOT static. It depends on how the function is called, and its value is only assigned when the 


function Is actually called. 


Takes the value of (points to) the owner of the function in which the this keyword is used. 


< Method example: 





Method — this = «Object that is calling the method» 


In strict mode! Otherwise: jonas 


window (in the browser) name 


| | is = | ear: 1989 
Don't get Simple function call < this = undefined y 


own this 
NS » Arrow functions — this = «this of surrounding function (lexical this) 


2037 —ithisl.vear 


Event listener <= this = <DOM element that the handler is attached to> 





new, call, apply, bind + <Later in the course... T > 


calcAge jonas 1989 
Is method 


Way better than using 
Jonas. year! 


& this does NOT point to the function itself, and also NOT the its variable environment! 


GUI QUESTIONS? FEEDBACK? 


JUST POST II IN THE USA OF THIS 
VIDEO, AND YOU WILL Gel HELP 
[HERE 
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RE VIEW: PRIMITIVES, OBJECTS AND THE JAVASCRIPT ENGINE 








PRIMITIVES e ENGINE OBJECTS 





= Number STORED IN < Object literal 

= String = Arrays 

< Boolean < Functions 

= Undefined STORE & Many more... 

= Null 

= Symbol | 

= Bigint REFERENCE TYPES 





CALL STACK HEAP 


| 


PRIMITIVE TYPES 


PRIMITIVE VS. REFERENCE VALUES 





Primitive values example: 











age = 30 
oldAge = age 
age = 31 
log (age) Identifier Address Value Address Value 
log(oldAge) 
age x 
5 0001 30 L — name: “Jonas”; 
age: 30; 
) 
oldAge 0002 31 
Reference values example: 
me = 1 | 27 
Å me 0003 D30F 
LEE onas No problem, because 
age: 30 we're NOT changing the | 
value at address 0003! friend 


log( ‘Friend: ', friend) 





CALL STACK HEAP 





EA 
log('Me:', me) 
Ea 


HOW JAVASCRIPT WORKS BEHIND The SCENES TOPICS FOR LATER... A 





Prototypal Inheritance « Object Oriented Programming (OOP) With JavaScript 


Event Loop « Asynchronous JavaScript: Promises, Asvnc/Awalt and AJAX 


How the DOM Really Works « Advanced DOM and Events 





DATA STRUCTURES, 
MODERN OPERATORS 
AND SIRINGS 








SEU I ION 


DAIA STRUC LURES, MODERN 
UPERATURS AND STRINGS 


LEG TURE 


SUMMARY: WHICH DATA STRUCTURE 
TÚ USE? 
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DATA STRUCTURES OVERVIEW 








SOURCES OF DATA 


1 From the program itself: Data written directly in source code (e.g. status messages) 


P "Object" 
i 


"count": 3, Array 
"recipes": | 47 







| | | | | 
a From the UI: Data input from the user or data written in DOM (e.g tasks in todo app) "publisher": "101 Cookbooks”, 
"title": "Best Pizza Dough Ever", 
"source url": “http://www. 101cookbooks.com/archiv 


"recipe id": "47746", 


3 From external sources: Data fetched for example from web API (e.g. recipe objects) < "image url": "http://forkify-api.herokuapp.com/im 


"social. rank": 100, 


"publisher url": "http://www.101cookbooks.com" 


d 4——- Object 




















: . f 
Application "publisher": "The Pioneer Woman", 
Programming "title": "Deep Dish Fruit Pizza", 
"source url": "http://thepioneerwoman.com/cooking 
Interface "recipe id": "46956", 
image url": "http://forkify-api .herokuapp. com/im 
- "Social rank": 100, 
OTHER BUILT-IN: "publisher url": "http://thepioneerwoman.com" 
I? 
< WeakMap d 
"publisher": "Closet Cooking", 
< WeakSet "title": "Pizza Dip", 
"source url": "http://www. closetcooking. com/2011/ 
"recipe id": "35477", 
NON-BUILT IN: image url": "http://forkify-api.herokuapp.com/im 
"social rank": 99,99999999999994 , 
< Stacks "publisher url": "http://closetcooking. com" 
j 
& Queues SIMPLE LIST? KEY/VALUE PAIRS? 
} 
< Linked lists 
& Hash tables Arrays or Sets Objects or Maps 47 describe values 





ARRAYS VS. SETS AND OBJECTS VS. MAPS 








tasks = ['Code Eat Code ' | 





Use when you need ordered 


list of values (might contain 
duplicates) 


Use when you need to 
manipulate data 


ARRAYS VS. 


SETS 





tasks = new (['Code', 'Eat', 'Code']): 


Use when you need to work 
with unique values 


Use when high-performance 
is really important 


Use to remove duplicates 
from arravs 








task = { 
task: ‘Code 
date today”, 


repeat: true 


+ 





More "traditional key/value 
store ('abused' objects) 


Fasier to write and access 
values with . and | | 


Use when you need to 
include functions (methods) 


Use when working with 
JSON (can convert to map) 


OBJEC TS VS. 





MAPS 


task — new ([ 
task Code' || 
date', ‘today 
false Start coding! 
|) 


Better performance 
Keys can have any data type 
Easy to iterate 


Easy to compute size 


Use when you simply need 
to map key to values 


Use when you need keys 
that are not strings 





A CLOSER LOOK AT 
FUNCTIONS 
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FIRST-CLASS VS. MIGHER-ORDER FUNCTIONS 





FIRST-CLASS FUNCTIONS niGheR-ORDER FUNCTIONS 


JavaScript treats functions as first-class citizens A function that receives another function as an 


This means that functions are simply values argument, that returns a new function, or both 


Functions are just another “type” of object This is only possible because of first-class functions 


Store functions in variables or properties: 1 Function that receives another function 


counter = 
value: 


‚log('He onas'): 
btnClose!addEventListener@' click' 





Pass functions as arguments to OTHER functions: 
2 Function that returns new function 


greet = () > ‚Log('Hey Jonas'): 
btnClose.addEventListener('click' | greet) 
C LER NW Higher-order 
l l T er = 
Return functions FROM functions en function 
return(function() { 
counter 
N Returned 


Call methods on functions: 


counter.inc someOtherObject); 





}; 
} 


function 
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‘CREATING A CLOSURE 





Global scope 


secureBooking = <f> 


| booker = <f> 
secureBooking = 


passengerCount = 0 

secureBooking() scope 

return () { = 
passengerCount ++ 


secureBooking() EC Log( SipassengerCount 
passengers 


passengerCount = 0 


secureBooking = 
booker = <f> 





passengerCount = 0 } 


Global EC / 
booker =IsecureBooking(): 


secureBooking = <f> 








CALL STACK SCOPE CHAIN 





UNDERSTANDING CLOSURES 





secureBooking() EC 


passengerCount = 0 


secureBooking = 
passengerCount = 0 


return () { 
passengerCount ++ 


booker() EC Log( SipassengerCount 


passengers 
<empty> } 
} “a This is the function 
secureBooking() 


booker = <f> 
l booker @ 


booker 0. 


Global EC 


secureBooking = <f> 


CALL STACK 





Global scope 


secureBooking = <f> 


booker = <f> 


secureBooking() scope 


passengerCount = O 


secureBooking = 
booker = <f> 





secureBooking = 
booker = <f> 





SCOPE CHAIN 





UNDERSTANDING CLOSURES 





A function has access to the variable environment (VE) of the execution context in which it was created 


Closure: VE attached to the function, exactly as it was at the time and place the function was created Global scope 


secureBooking = <f> 


z booker = <f> 
secureBooking = 


passengerCount = 0; 
secureBooking() scope 
return () { 5 P 

passengerCount+ ; 
booker () EC „Log( S{passengerCount} 


passengerCount = O 


secureBooking = 
booker = <f> 


passengers ); 
<empty> E 
J 


l- e This is the function 


Global EC 
booker passengerCount = 
secureBooking = <f> 


booker = <f> 





secureBooking = 
booker = <f> 








CALL STACK SCOPE CHAIN 


CLOSURES SUMMARY $ 





& A closure is the closed-over variable environment of the execution context in which a function was created, even after that 
execution context Is gone; 


l Less formal 
< A closure gives a function access to all the variables of its parent function, even after that parent function has returned. The 
function keeps a reference to its outer scope, which preserves the scope chain throughout time. 
l Less formal 


< A closure makes sure that a function doesn't loose connection to variables that existed at the functions birth place; 
1771117 


PA be 
Less formal Å je eh Då 
A 


A k 


Function Connection Parent scope Variables 





«= A closure ts like a backpack that a function carries around wherever it goes. This backpack has all the variables that were 
present in the environment where the function was created. Å D 
Iš p“ 
A A k 


Function Closure Variables 


& We do NOT have to manually create closures, this is a JavaScript feature that happens automatically. We can't even 
access closed-over variables explicitly. A closure is NOT a tangible JavaScript object. 


WORKING WITH 
ARRAYS 





SEL ION 
WORKING WITH ARRAYS 


LEG TURE 


JATA TRANSFURMAHUNS: MAP, FILTER 
“EDULE 
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DATA TRANSFORMATIONS WITH MAP, FILTER AND REDUCE 





van Original array 





| 





1 | 








FILTER REDUCE 


"= Example Accumulator ——,, 
current x 2 current > 2 " 4 acc + current 


EEEN III NMZÁ 
EEE EE B 

















RL Filtered array 
& map returns a new array containing & filter returns anew array & reduce boils (‘reduces’) all array 
the results of applying an operation containing the array elements that elements down to one single value 


on all original array elements passed a specified test condition (e.g. adding all elements together) 


SEL ION 
WORKING WITH ARRAYS 


LEG TURE 


SUMMARY: WHICH ARRAY METHOD 10 
UDE? 
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WHICH ARRAY METHOD TO USE? € | 


WANT... 





To mutate original array 


“ Add to original: 










(end) 


(start) 


< Remove from original: 












< Others: 









(end) 


(start) 


(anv) 


A new arrav An array index 


< Computed from original: < Based on value: 


“ Filtered using condition: 











& Portion of original: 





& Adding original to other. An array element 





«= Flattening the original: 





& Based on test condition: 


“ Based on test condition: 


Know If array includes 


< Based on value: 





“ Based on test condition: 





A new string 


“ Based on separator string: 





To transform to value 


< Based on accumulator. 





(Boil down array to single 
value of any type: number, 
string, boolean, or even new 
array or object) 


To just loop array 


< Based on callback: 





(Does not create a new array, 
just loops over it) 





ADVANCED DOM AND 
EVENTS 








SEL NON 
ADVANGED UUM AND EVENTS 


LEG TURE 
HUW [HE DOM REALLY WORKS 
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REVIEW: WHAT 15 Inc DOM? 


BROWSER 





INTERFACE 


= Allows us to make JavaScript interact with the browser; 





& We can write JavaScript to create, modify and delete HTML elements; 2 
set styles, classes and attributes; and listen and respond to events; 





= DOM tree is generated from an HTML document, which we can then 


Interact with; m | 
—7 Application Programming Interface x yx X 


= DOM Is a very complex API that contains lots of methods and 


(X 
properties to interact with the DOM tree V A ; 
Types" of 
DOM objects 


DOM tree .querySelector() / .addEventListener() / .createElement() / 
.innerHTML / .textContent / „children / etc ... 








(next slide) 


HOW The DOM API IS ORGANIZED BEHIND [HE SCENES 





®IMDN web docs Represented by 


'moz://a JavaScript object 
EE BL EventTarget 


,addEventListener() 





.removeEventListener () 





. 1nnerHTML . textContent 

„classList „childNodes 

„children „parentNode Global object, lots 
„parentElement .cloneNode() Window of methods and 
„append() properties, many 








„remove() unrelated to DOM INHERITANCE OF 
.insertAdjacentHTML ( ) va 4 YON METHODS AND 











a> .querySelector() PROPERTIES 
„closest() 
matches () Text Comment Document 
.scrollIntoView() Example: 
EEN la dai comment — Me QUES LACRA Any HTMLE lement wil 
.createElement() have access to 





.getElementById() .addEventListener(), 
HTMLEIement .CloneNode() 
or .closest() methods. 


X yYx 0 


(One different type of 
HTMLButtonElement um HTMLDivElement HTMLElement per 
HTML element...) 





(THIS IS NOT A DOM TREE) 


SEL NON 
ADVANGED UUM AND EVENTS 


LEG TURE 


EVENT PAUrAGALUN: BUBBLING AND 
LAP TURING 
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BUBBLING AND CAPTURING 





Click event 


DOCUMENT 
html 1 3 





ent CAPTURING y BUBBLING 
title>A Simple Page</title PHASE PHASE 


head 
body 


section document 


querySelectom('section' ) 
addEventLiısterert LLILK 


alert('Vou cliked me 8 


p>A paragraph with al a» link | | 





+) 
p>A second paragraph</p 
section 127.0.0.1:8080 says 
l You cliked me 8 
section { 
img dom.png The DOM 
Ze ELEMENT 
section <p> 
document 
bod y | queryse lector 
addEventListener 
html ELEMENT E lert('You cli 
<a> 


127.0.0.1:8080 says 
(THIS DOES NOT HAPPEN 2% TARGET PHASE Geer 
ON ALL EVENTS) Suse 





SEL NON 
ADVANGED UUM AND EVENTS 


LEG TURE 


EFFICIENT SCRIP | LOADING: DEFER 
AND AsYNC 
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DEFER AND ASYNG SCRIPT LOADING 





HEAD BODY END 
Time Execute DOMContentLoaded DOMContentLoaded 


ASYNC 

Pm Ca en Execute DOMContentLoaded 
script.js 

DEFER Execute 

ELITS DOMContentLoaded 














< Makes no sense w 





< Makes no sense Ww 








REGULAR VS. ASYNG VS. DEFER 





END OF BODY ASYNG IN MEAD 





DEFER IN HEAD 


Run 





RUN DoMContentLoaded 





DOMContentLoaded DOMContentLoaded 
& Scripts are fetched and executed after the < Scripts are fetched asynchronously and & Scripts are fetched asynchronously and 
HTML is completely parsed executed immediately executed after the HTML is completely 
l parsed 
& Use If you need to support old browsers < Usually the DOMContentLoaded event 
waits for all scripts to execute, except for < DOMContentLoaded event fires after 
async scripts. So, DOMContentLoaded defer script is executed 


does not wait for an asvnc script | | l 
& Scripts are executed In order 


& Scripts not guaranteed to execute in order o. | 
& This is overall the best solution! Use for 


< Use for 3rd-party scripts where order your own scripts, and when order matters 
doesn't matter (e.g. Google Analytics) (e.g. including a library) 


You can, of course, use different 
strategies for different scripts. Usually a 
complete web applications includes 
more than just one script 


Parse HTML 


Run Run 





DOMContentLoaded DOMContentLoaded 





OBJECT ORIENTED 
PROGRAMMING (OOP) 
WITH JAVASCRIPT 








SEU TION 


UBJELI URIEN TED PROGRAMMING 
OOP) WITH JAVASLAIP | 


LEG TURE 


WHAT IS UBJELI-URIENIED 
PROGRAMMING ? 
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WHAT Is OBJECT-ORIENTED PROGRAMMING? (00P) 









Style of code, 'how' we 
write and organize code 


00° 





Object-oriented programming (OOP) is a programming paradigm based on the 


concept of objects; 


Data E.g. user or todo list item 


< We use objects to model (describe) real-world or abstract features; E.g. HTML component or data structure 


User 


f Objects may contain data (properties) and code (methods). By using objects, we 
DaSswor 


pack data and the corresponding behavior into one block; 
= In OOP objects are self-contained pieces/blocks of code; 
= Objects are building blocks of applications, and interact with one another; 


< Interactions happen through a public interface (API): methods that the code 





outside of the object can access and use to communicate with the object; 


Behaviour & OOP was developed with the goal of organizing code, to make it more flexible 
and easier to maintain (avoid “spaghetti code”). 





GLASSES AND INSTANCES (TRADITIONAL OOP) 








Conceptual overview: it works 
| Li Å a bit differently in JavaScript. 
Instance ELT auis Still important to understand! 


user = 'jonas' 
password = 'dk23s 
email = 'hello(jonas.io 


Login(password) 4 


l- 
sendMessage(str) 4 Instance 
l- 


user — 'marv 
password = ‘qwerty23 
user email = 'mary@test.com 


DaSSWO rd login(password) 4 
email 


sendMessage(str) 4 


Instance 
login(password) 4 } 


user = ‘steven 
} password = '5p8dz32dd 


sendMessage(str) { email = 'steven@tes.co 


login(password) 4 


l- 


sendMessage(str) 4 


} 


Int 4 FUNDAMENTAL OOP PRINCIPLES 





The 4 fundamental 


principles of Object- 
y Oriented Programming 


©) "How do we actually design classes? How 
do we model real-world data into classes?" 





PRINCIPLE 1: ABSTRACTION 








{ 
charge 
volume 
voltage 
temperature 
Abstraction homeBtn() {} | D 3c { 
volumeBtn() {} | == I ki MK = @ | charge 
screen() {} = Ua MET | volume 
Encapsulation verifyVoltC) D — | v 
verifvTemp() (+ Ce «|| homeBtn() {} 
vibrate() {} | = wm | - volumeBtn() il 
| soundSpeaker() 4) LN screen() il) 
Inheritance soundEar() {} — d 


frontCamOn() 1) 
frontCamOff() {} 
rearCamOn() {} 
rearCamOff() {} 








Polymorphism 





Abstraction: Ignoring or hiding details that dont matter, allowing us to 
get an overview perspective of the thing we re implementing, instead of 
messing with details that dont really matter to our implementation. 


PRINCIPLE 2: ENCAPSULATION 





{ 


user 

private password 

private email 

ngin(word) + 
this*password == word 


Abstraction 





Prevents external code from 


Encapsulation y 


comment(text) { 
this .checKSPAM( text 


accidentally manipulating 


Inheritance l internal properties/state 
| private |checkSPAM(text) { 


Allows to change internal 
Polymorphism } implementation without the 
J risk of breaking external code 





Encapsulation: Keeping properties and methods private inside the class, 
so they are not accessible from outside the class. Some methods can 
be exposed as a public interface (API). 


PRINCIPLE 3: INHERIT ANGE 





CHILD CLASS 







user 


password i 
email RE 
password 
| login(password email 
Abstraction - 
y ^ login(password) 4 
l sendMessage(str) 
Encapsulation 
d } 
sendMessage(str) 
Inheritance 


Polymor phism and properties 


Inheritance: Making all properties and methods of a certain class available 
to a child class, forming a hierarchical relationship between classes. This 
allows us to reuse common logic and to model real-world relationships. 


PRINCIPLE 4: POLYMORPHISM 





{ 


INHERITANCE E 
password 
email 





INHERITANCE 


1 
user 
password 
email 
posts 


i 
user 
password 
email 
Encapsulation permissions 


Abstraction 


login(password) 4 
l 


sendMessage(str) 4 


} 











J Login(password) 4 
Inheritance PARENT CLASS 
deleteUser(user) į writePost() 4 
Polvmorphism d d 
} 
CHILD CLASS CHILD CLASS 


Polymorphism: A child class can overwrite a method it inherited from a 
parent class [it’s more complex that that, but enough for our purposes]. 


SEU TION 


UBJELI URIEN TED PROGRAMMING 
OOP) WITH JAVASLAIP | 


LEC TURE 
JUP IN JAVASLAIP | 
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OOP IN JAVASCRIPT: PROTOTYPES 





‘CLASSICAL OOP : CLASSES 





Class 





| INSTANTIATION 





Instance 


Objects (instances) are 
instantiated from a class, which 
functions like a blueprint; 


Behavior (methods) is copied from 
class to all instances. 


OOP IN JS: PROTOTYPES 


Prototype 





PROTOTVPAL INHERITANCE/ 
DELEGATION 





Objects are linked to a prototvpe object; 


Prototypal inheritance: The prototype 
contains methods (behavior) that are 
accessible to all objects linked to that 
prototype; 


Behavior is delegated to the linked 
prototype object. 


Example: Array 


[nun |= [1, 2, 3] 





| num Jmap (v = V X 2) 
®IMDN web docs 





Arrav.prototvpe.kevs() 
Arrav.prototvpe. lastiIndexof() 


Array.prototypegmap( ) 


Array() 


dl U Uments. ( mu: u ) 





3 WAYS OF IMPLEMENTING PROTOTYPAL INHERIT ANCE IN JAVASCRIPT 








& The 4 pillars of OOP 
are still valid! 


C9 "How do we actually create prototypes? And how do we link objects to 


prototypes? How can we create new objects, without having classes?” 
Abstraction 


Encapsulation 





1 Constructor functions 


Inheritance 


fk A A 


= Technique to create objects from a function; Polymorphism 


= This ts how built-in objects like Arrays, Maps or Sets are actually implemented. 


a ES6 Classes 


< Modern alternative to constructor function syntax; 








= “Syntactic sugar”: behind the scenes, ES6 classes work exactly like constructor functions; 





+ ES6 classes do NOT behave like classes in “classical OOP” (last lecture). 


3 Object.create( ) 


< The easiest and most straightforward way of linking an object to a prototype object. 





SEU TION 


UBJELI URIEN TED PROGRAMMING 
OOP) WITH JAVASLAIP | 


LECTURE 


PRUTUI TFAL INHERHANGE AND THE 
PROTOTYPE CHAIN 
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HOW PROTOTYPAL INHERITANCE / DELEGATION WORKS 





„prototype 


Constructor function p Prototype NEW. The new operator: 
[Person() ] dio [Person.prototype | 





1 An empty object is created 





«Constructor 
Person - (name, birthYear) 4 calcAge: function 
this.name = name 2 this keyword in 
this.birthYear = birthYear 
d constructor function call 
PROTOTYPAL Is set to the new object 
INHERITANCE/ -__Pproto__ 
DELEGATION 3 The new object Is linked 





( „proto property) to 
the constructor function's 


Object prototype property 


jonas =f new ('Jonas', 1990) 


a = i m 
calcAge 
DTe LLAULC 


[Jonas | 





4 The new object Is 
name: ‘Jonas’ returned from the 


constructor function call 
barthYear: 1990 


__proto 
s This is how it works with function Person.prototype 


constructors and ES6 classes 





Int PROTOTYPE CHAIN 





Prototype Object.prototype 
Constructor function [Object prototype |] WEE 


[Object (| ] 














__proto__: null PROTOTYPE 
CHAIN 
A Here it Is! 
2: proto... 
This is an OBJECT ae vines 
Beete itself! Remember, every vitiis Mn 
Ee t K object In JavaScript MA HLA) 
Constructor function LPerson.prototype! has a prototype! prototypes 
IPerson()) __proto__ (Similar to the 
Object.prototype scope chain) 
Can't find 
A „ proto hasOwnPropertv 
Built-in constructor function here! 





for objects. This Is used when 


| ME Object 
we write an object literal: 


[Jonas ] 


jonas.hasOwnProperty('name' ); 


{..} === new Object (...) 





„„proto : 
Person.prototvpe 





Cant find hasOwnProperty here! 


SEU TION 


UBJELI URIEN TED PROGRAMMING 
OOP) WITH JAVASLAIP | 


LEC TURE 
UBJELI CREATE 
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MOW 0BJEGI.GREATE WORKS 





Prototype 


[PersonProto ] ei T 
Log(2057 - this.birthYear 


calcAge: function 


„ proto. steven = cpeatelPersonProto) 


Object 


[steven | 


OBJECT .CREATE 


name: ‘Steven’ 


birthYear: 2002 














CONSTRUCTOR FUNCTIONS 


mrototvøeé 
HE . 


LPErson Sal IPerson.prototvpel 


Constructor fariction Prototvpe 





calcAge: function 


jonas — new ('Jonas', 1990) 


Object 


[jonas] 
name: ‘Jonas’ 


birthYear: 1990 


Person.prototype 


SEU TION 
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NHEATTANGE Be WEEN CLASSES | 
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INĦERITANĠE BETWEEN CLASSES 





van Parent 
“CLASS” 2 





— 





| INHERITANCE BETWEEN CLASSES" 


Van Child 
L-4 > ` remm | Re | 


STUDENT 


| NV More specific type 


of person, ideal as 
Object child class 


1 Constructor functions 











& Using class terminology here to 
make it easier to understand. 


INĦERITANĠE BETWEEN CLASSES 





Prototype 
Constructor function srototype | 


— 





Person.prototype 


[Person( ) ] 








(species: 
() 
Student.prototype 4 Object.create{Person.prototype) A e „proto “/ 
Prototype N Create connection sn 
| Student prototype Manua y Sng 
Constructor function | ype Object.create() CHAIN 
[Student (1) ] oroto : 


Object 
[mike | 


proto 


Student. prototype 





INĦERITANĠE BETWEEN CLASSES 












Prototype 
Student.prototype Object.create(Person.prototvpe) Constructor function [Person.prototype | 
[Person() ] 
Prototype 
Constructor function [Person. prototype] 


— 





[Person() ] 


student. prototype Person. prototype 





A 


Prototype 
[Studaat.pro 














ype] Constructor function 
[Student ( ) ] 


Constructor function 
[Student () ] 





— 


otõ%, : 


PsPSson.prototy&e 





Object 
[mike | 


ze GOOD “E BAD 


„proto 
Student.prototype 





INĦERITANĠE BETWEEN CLASSES 








Prototype 
null 
Prototype > [Object.prototype | > 
Constructor function (IPerson. arototype] 
[Person( |] "proto : Person.prototype 


Object.prototype ispecies: 


A „ „proto — 


() 





Here it is! 


Student.prototype = Object.createlPerson.prototype) 









Prototype 
Constructor function A o i a ii 
[Student (1) ] oroto : 
Can't find 
| calcAge here! 
Student( 'Mike A „ proto Õõ 





Object 
[mike | 


mike.calcAge() 





proto : 
Student.prototype 


Cant find calcAge here! 
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INHERIT ANGE BETWEEN CLASSES : OBJECT CREATE 








calcAge: functton 


'eatefPersonProtol 





Student 


A „ proto inherits from 
Person 


Prototype 
CHAIN 
oroto | 











SEU TION 
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extends 
university = 'Umaversitv of 
žstudyHours = 0; 
#course; 


static numSubjects = 10; 


(fullName, birthYear, startYear, course) 
super(fullName, birthYear) ; 


this.startYear = startvear; 
this.#course = course; 


introduce() 4 
‚log( I study Sithis.fcoursej at Sithis.university} ); 


studv(h) 4 
this .#makeCoffe() | 
this.#studyHours += h; 


} 


#makeCoffe() { 
return ‘Here is a coffe for you @'; 


> 


testScore() { 


return this._testScore; | 
d Classes are Just 


“syntactic sugar over 


tests | 
estScore(score) 1 constructor functions 


this. testScore = score < 20 ? score : 


y Classes are not hoisted 


static printCurriculum() 4 Classes are first-class 
.Log( There are S{this.numSubjects} subjects’ L. 
citizens 


Class bodv Is alwavs 
student = new ('Jonas', 2020, 2037, 'Medicine'); executed In strict mode 





MAPT Y APP: OOP, 


GEOLOCATION, 
EXTERNAL LIBRARIES, 
AND MORE! 








DEL TION 


MAP LY APP: OUP. bEULULAI IUN 
PATERNAL LIBRARIES, AND MORE 


LEC | URE 
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PROJECT PLANNING 





Description of the application's 
functionality from the users 


perspective. All user stories put 
together describe the entire application. WHAT we will build HOW we will build it 


( ( 


L 2 3 


4 


USER STORIES FEATURES FLOWCHART ARCHITECTURE 





PLANNING STEP 


Implementation of 
our plan using code 


1. USER STORIES 





n 


User story: Description of the application's functionality from the user's perspective. 


A 


Common format: As a [type of user], | want [an action] so that [a benefit] 


X- Who2 X- What? X- Whv2 


Example: user, admin, etc. 


As a user, | want to log my running workouts with location, distance, time, pace and 
steps/minute, so l can keep a log of all my running 


As a user, | want to log my cycling workouts with location, distance, time, speed and 
elevation gain, so | can keep a log of all my cycling 


As a user, | want to see all my workouts at a glance, so | can easily track my progress 
over time 


As a user, | want to also see my workouts on a map, so | can easily check where | 
work out the most 


As a user, | want to see all my workouts when I leave the app and come back later, so 
that | can keep using there app over time 





2, FEATURES 





USER STORIES ———————— FEATURES 


Log my running workouts with location, 
distance, time, pace and steps/minute 


Log my cycling workouts with location, 


See all my workouts when | leave the 
app and come back later 





—— 


distance, time, speed and elevation gain I 


See all my workouts at a glance Wess 


See my workouts on a map Dd 


en 








Map where user clicks to add new workout (best way to 
get location coordinates) 


Geolocation to display map at current location (more user 
friendly) 

Form to Input distance, time, pace, steps/minute 

Form to input distance, time, speed, elevation gain 
Displav all workouts In a list 


Displav all workouts on the map 


Store workout data in the browser using local storage API 


On page load, read the saved data from local storage and 
displav 


3. FLUWGHARI 














































FEATURES 
1. Geolocation to displav 
map at current location Ta 
Page loads on 2 Render map op | handler User clicks on Render workout 
2. Map where user clicks to kordinatat current location map form 
add new workout | 
| | | 
3. Form to input distance, Load workouts | Render workout | Bind handler 
time, pace, steps/minute from local storage l on map | Bind handle 
l 
| Many 
4. Form to input distance, 
time, speed, elevation gain | | 
Move map to User clicks on Render workout User submits 
5. Display workouts in a list workout location workout in list "I in list new workout 
handler 


6. Display workouts on the 
map 





Store workouts in | | 
local storage li 





1. Store workout data in the 
browser 


Many 


8. On page load, read the 


saved data and displa 
ini & Inthe real-world, you don't have to come with the final flowchart right in the 


9. Move map to workout planning phase. It's normal that it changes throughout implementation! 
location on click W^ Added later 


4, ARCHITECTURE 





FOR NOW, LET S JUST 
START CODING & 





DEL TION 


MAP LY APP: OUP. bEULULAI IUN 
PATERNAL LIBRARIES, AND MORE 
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10 ADDITIONAL FEATURE IDEAS: CHALLENGES & 





= Ability to edit a workout; 

& Ability to delete a workout; 

= Ability to delete all workouts; 

Z- Ability to sort workouts by a certain field (e.g. distance); 


= Re-build Running and Cycling objects coming from Local Storage; 





More realistic error and confirmation messages; 





Ability to position the map to show all workouts [very hard]; 





Ability to draw lines and shapes instead of just points [very hard]: 


< Geocode location from coordinates ("Run in Faro, Portugal") [only after 
asynchronous JavaScript section]; 


Z- Display weather data for workout time and place [only after asynchronous 
JavaScript section]. 


ASYNCHRONOUS 
JAVASCRIPT: 
PROMISES, ASYNC/ 

AWAIT AND AJAX 








SEU TION 


ASTNUĦRUNUUS JAVASURIF |: 
PRUMIScs, ASTNU/ AWALI AND AJAX 


LEG TURE 


ASTNUĦRUNDUS JAVASCRIPT, AJAX 
ANU Aris 
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OY NCHRONOUS CODE 





p = document THREAD OF 
p.textContent EXECUTION 


BLOCKING 
D style color 127.0.0.1:8080 says 








< Most code is synchronous; 
Part of execution 


& Synchronous code is executed line by line; context that actually 
SYNCHRONOUS executes the code in 
& Each line of code waits for previous line to finish; COMPUTERS SEN 


«E Long-running operations block code execution. 





ASYNCHRONOUS CODE 





JP = document. querySelector('.p') THREAD OF BACKGROUND? 
setTimeout( () Į EXECUTION 
p.textContent = 'My name is Jonas! u 
), 5000) Timer 
p.style.color = ‘red running 





] = 
i d 

L 

ue 
[D | e 
CER 

1 
17 


Example: Timer with callback 








[1, 2, 3].map(v > V * 2) 


(More on this in the 
lecture on Event Loop) 


Asynchronous code is executed after a task that runs in the “background” finishes; 


Asynchronous code Is non-blocking; 
ASYNCHRONOUS 
Execution doesnt wait for an asynchronous task to finish Its work; 


Callback functions alone do NOT make code asynchronous! 





ASYNCHRONOUS CODE 





img = document.querySelector('.dog') 





THREAD OF l " 
img.src = 'dog.jpg EXECUTION PACKAR 
img.addEventListener('load () 4 

img.classList.add(' fadeln 
Image 
$ loading 
p.style.width = '300px " 
e Ze | 
Example: Asynchronous image loading with event and callback 
Other examples: Geolocation API or AJAX calls (More on this in the 


lecture on Event Loop) 


Asynchronous code is executed after a task that runs in the “background” finishes; 


Asynchronous code Is non-blocking; 
ASYNCHRONOUS 
Execution doesnt wait for an asynchronous task to finish Its work; 


Callback functions alone do NOT make code asynchronous! 





WHAT ARE AJAX CALLS? 





Asynchronous JavaScript And XML: Allows us to communicate with 
remote web servers In an asynchronous way. With AJAX calls, we can 


request data from web servers dynamically. 


Usually a 





YT Asking for some data + = 


REQUEST (GET / POST / etc.) 











RESPONSE 


NL Sending data back sj = 





WHAT 15 AN API? 








"publisher": "101 Cookbooks", 
"title": "Best Pizza Dough Ever" 








ce url": "http://www.101cookbo 
"recipe id": "47746", 

e url": "http://forkify-api.he 
social. rank": 100, 
"publisher url": "http://www. 101coo 


= Application Programming Interface: Piece of software 
that can be used by another piece of software, in order to 






allow applications to talk to each other; 
JSON data 


format 





| format 
+ There are be many types of APIs in web development: 


x Most popular 
DOM API Geolocation API Own Class API “Online” API API data format 
R— Just API“ 


& "Online" API: Application running on a server, that receives 








Weather data 


Data about countries 


Flights data *X Q 


Currency conversion data 


requests for data, and sends data back as response; 


There Is an API for 


We can build our own web APIs (requires back-end a 
development, e.g. with node.js) or use 3rd-party APIs. 





APIs for sending email or SMS 
Google Maps 


& SS S S S A 


Millions of possibilities... 
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WHAT HAPPENS WHEN We ACCESS A WEB SERVER 





G- Request-response model or Client-server architecture 


REQUEST 








RESPONSE 


WHAT HAPPENS WHEN We ACCESS A WEB SERVER 





GET /rest/v2/alpha/PT HTTP/1.1| => Start line: HTTP method + request target + HTTP version 


Host: www.google.com 
User-Agent: Mozilla/5.0 —)+ HTTP request headers (many different possibilities) 








https://104.27.142.889:443 


Accept-Language: en-US 





— Request body (only when sending data to server, e.g. POST) 


HTTP REQUEST 3 
2 TCP/IP socket connection 


https://restcountries.eu/rest/v2/alpha/ HTTP RESPONSE 4 


HTTP/1.1 200 OK —-e==> Start line: HTTP version + status code + status message 





DNS LOOKUP 












WEB 
SERVER 








Protocol Domain name Resource Date: Fri, 18 Jan 2021 


(HTTP or HTTPS) Content-Type: text/html — > HTTP response headers (many different possibilities) 





Transfer-Encoding: chunked 


> Response body (most responses) 


SEU TION 


ASTNUĦRUNUUS JAVASURIF |: 
PRUMIScs, ASTNU/ AWALI AND AJAX 


LEC TURE 
PRUMISES AND IHE FE [CH AP) 


€ JONASSCHMED I MAN 














WHAT ARE PROMISES? 





< Promise: An object that is used as a placeholder for the future 


result of an asynchronous operation. 
l Less formal 


Promise: A container for an asvnchronousiv delivered value. 


l Less formal 


Promise: A container for a future value. 
Example: Response 


from AJAX call 


We no longer need to rely on events and callbacks passed into 
asvnchronous functions to handle asvnchronous results; 


Instead of nesting callbacks, we can chain promises for a 
sequence of asynchronous operations: escaping callback hell $: 





| » Promise that | will 
| receive money If | guess 
correct outcome 


d | buy lottery ticket (promise) 
right now 


y 


€) Lotterv draw happens 
asynchronously 


y 


8) If correct outcome, | receive 
money, because it was promised 


Int PROMISE LIFECYCLE 





Before the future Asynchronous task 


E.g. Fetch API returns promise 
a value is available a has finished ( 
ASYNC TASK 


ren NL CONSUME 
4 PROMISE 


Success! The value o J Ka An error oJ 
When we already have a 


is now available happened 
promise. E.g. promise 


< Weare able handle these different states in our code! returned from Fetch API 


BUILD 
PROMISE 





O 
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RE VIEW: JAVASCRIPT RUNTIME 





< Concurrency model: How JavaScript handles “Container” which includes all the pieces 


multiple tasks happening at the same time. necessary to execute JavaScript code 


SUIT 
å | y» 
, 
A 
NY 
4, A 
/ | DIN 


js RUNTIMEINTHEBROWSER G 





‘Heart’ TT js ENGINE WEB APIs 4——— Apis provided 


the runtime to the engine 
Me] sends callbacks 
a from queue to 
EVENT LOOP call stack 
CALLBACK QUEUE TIE Ready-to-be-executed 
( ) callback functions 


HEAP CALL STACK 





Where object are Where code Is Only ONE thread of 
stored in memory actually executed execution. No multitasking! 


MOW ASYNCHRONOUS JAVASCRIPT WORKS BEHIND [HE SCENES 


el = document.querySelector('img') ; 

el.src = 'dog.jpg'; 

el.addEventListener('load', ) => d 
ON NE el.classList.add('fadeln'); 


el.classList.add('fadeIn'); DE 


` fetch('https: //someurl.com/api') 
e „thenlres > „Tog(res)); 
log() CLE SEN 
Fetching data 
Execution context 
quervSelector() 
P MICROTASKS 





QUEUE 
Global Execution 
context m 
2) How can asynchronous code be 
executed in a non-blocking way, 
B Ai GALLBAGK if there Is only one thread of 
CALL STACK callback callback QUEUE y 


execution in the engine? 





MODERN JAVASCRIPT 
DEVELOPMENT: 
MODULES AND 

TOOLING 
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MODERN JAVASCRIPT DEVELOPMENT 





Join all modules Convert modern 


into one file o JavaScript back to ES5 
MODULE SCH. 


> TRANSPILING/ ) JAVASCRIPT 
BUNDLE 








MODULE mij BUNDLING 





POLYFILLING 
























3RD-PARTY 
PACKAGE 
BUILD PROCESS PRODUCTION 
DEVELOPMENT åø webpack or = PARCEL 

3rd party modules "mmm 

< Contains open-source packages to include 3rd-party 
NODE PACKAGE npm code in our own code (e.g React, jQuery, Leaflet, etc.) 

MANAGER | < Contains development tools that help build our 





IA applications (e.g. live-server, Parcel, Babel, etc.) 
Both repository and software 
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AN OVERVIEW OF MODULES 





< Compose software: Modules are small building blocks 
that we put together to build complex applications; 


MODULE 





Isolate components: Modules can be developed In 


WHY isolation without thinking about the entire codebase; 


<- Reusable piece of code that 
j MODULES? 


encapsulates implementation details “ Abstract code: Implement low-level code in modules and 


import these abstractions into other modules; 





& Usually a standalone file, but it doesn't 


have to be. < Organized code: Modules naturally lead to a more 
organized codebase; 


< Reuse code: Modules allow us to easily reuse the same 
code, even across multiple projects. 


IMPORT 
(DEPENDENCY) 





rand Module code 


| 


Scores diceP1 diceP2 
scores 


EXPORT 
(PUBLIC API) 





NATIVE JAVASCRIPT (E50) MODULES 








E50 MODULE SCRIP T 













& Top-level variables Scoped to module Global 

Modules stored in files, exactly 

one module per file. “ Default mode Strict mode 'Sloppv' mode 
< Top-level this undefined window 
Z- Imports and expor YES © NO 

1 ML linking <script type="module"> <script> 
diceP1, diceP2 
scores 

< File downloading Asynchronous Synchronous 








import and export 
syntax 


& Need to happen at top-level 


Imports are hoisted! 


HOW ESO MODULES ARE IMPORTED 





å rand |) „Amath.js 

{| showDice | k ,1dom.jS 

dice rand(1, 6, 2) 
showJice (dice) 





Z- index.js 





Live connection, { rand | 


NOT copies < math.js 


IMPORTING MODULES 
BEFORE EXECUTION 





& Modules are imported synchronously 


< Possible thanks to top-level (“static”) imports, 
which make imports Known before execution 


< This makes bundling and dead code 
elimination possible 





downloading math.js 


Live connection, 
NOT copies 


Parsing index.js 


+ + showDice () 





11 showDice |} 





Asynchronous 
downloading dom.js 


Asynchronous 
Z- dom.js 


Y Y 


Linking imports to 
dom. js exports 


Linking imports to 
math.js exports 


Y Y 


Execution math.js Execution dom. js 


v Y 


Execution index.js 
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REVIEW: MODERN AND CLEAN CODE 





READABLE CODE FUNCTIONS 

“ Write code so that others can understand it < Generally, functions should do only one thing 

“ Write code so that you can understand It in 1 year < Dont use more than 3 function parameters 

< Avoid too clever and overcomplicated solutions < Use default parameters whenever possible 

“ Use descriptive variable names: what they contain < Generally, return same data type as received 

“ Use descriptive function names: what they do < Use arrow functions when they make code more readable 
GENERAL OOP 


Use ES6 classes 





Use DRY principle (refactor your code) 
Dont pollute global namespace, encapsulate instead Encapsulate data and don't mutate it from outside the class 


Dont use var Implement method chaining 





Use strong type checks (=== and ! ==) Do not use arrow functions as methods (in regular objects) 


REVIEW: MODERN AND CLEAN CODE 














AVOID NESTED CODE ASYNCHRONOUS CODE 

“ Use early return (guard clauses) < Consume promises with async/await for best readability 

“ Use ternary (conditional) or logical operators instead of if < Whenever possible, run promises in parallel (Promise.all) 
< Use multiple if instead of if/else-if < Handle errors and promise rejections 

< Avoid for loops, use array methods instead 

< Avoid callback-based asynchronous APIs 
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IMPERATIVE VS. DEGLAKATIVE CODE 





Two fundamentally different ways 


01 of writing code (paradigms) TA 
IMPERATIVE DECLARATIVE 





+ Programmer explains “HOW to do things” < Programmer tells “WHAT do do 
< We explain the computer every single step it has to < We simply describe the way the computer should achieve 
follow to achieve a result the result 





“ Example: Step-by-step recipe of a cake The HOW (step-by-step instructions) gets abstracted away 





Example: Description of a cake 


arr 2 


doup Leq arr 2, 4, 6 


1 0: 1 
doubled! 1 arr! 1 2 


doub led arr 





FUNCTIONAL PROGRAMMING PRINCIPLES 








FUNC TIONAL PROGRAMMING FUNCTIONAL PROGRAMMING TECHNIQUES 


< Try to avoid data mutations 


A 


Declarative programming paradigm 
< Use built-in methods that dont produce side effects 


n 


Based on the idea of writing software by combining many 


pure functions, avoiding side effects and mutating data < Do data transformations with methods such 
as .map(), .filter() and . reduce() 





Z- Side effect: Modification (mutation) of any data outside < Try to avoid side effects in functions: this is of course not 


of the function (mutating external variables, logging to always possible! 
console, writing to DOM, etc.) 


< Pure function: Function without side effects. Does not DECLARATIVE SYNTAX 
depend on external variables. Given the same inputs, 
always returns the same outputs. 





Use array and object destructuring 





Immutability: State (data) is never modified! Instead, 
state Is copied and the copy is mutated and returned. 


Use the spread operator (. . .) 


Use the ternary (conditional) operator 





Use template literals 





Examples: Ke React KA Redux 
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PROJECT PLANNING 








= LATER 


USER STORIES FEATURES FLOWCHART nn > en 


PLANNING STEP 





1. USER STORIES 





“ User story: Description of the applications functionality from the users perspective. 


< Common format: As a [type of user], | want [an action] so that [a benefit] 


As a user, | want to search for recipes, so that | can find new ideas for meals 


As a user, | want to be able to update the number of servings, so that | can cook a 
meal for different number of people 


As a user, | want to bookmark recipes, so that | can review them later 


As a user, | want to be able to create my own recipes, so that | have them all 
organized in the same app 


As a user, | want to be able to see my bookmarks and own recipes when | leave the 
app and come back later, so that | can close the app safely after cooking 





2, FEATURES 





USER STORIES — "| FEATURES 


Search forrecipes 2 ——— > 


Update the number of servings — 
Bookmark recipes EN 


Create my own recipes — 35 


See my bookmarks and own recipes 


when I leave the app and come back later IE 





f 


4 





Search functionality: input field to send request to API with searched 
keywords 


Display results with pagination 


Display recipe with cooking time, servings and ingredients 


Change servings functionality: update all ingredients according to 
current number of servings 


Bookmarking functionality: display list of all bookmarked recipes 


User can upload own recipes 
User recipes will automatically be bookmarked 


User can only see their own recipes, not recipes from other users 


Store bookmark data in the browser using local storage 


On page load, read saved bookmarks from local storage and display 


3. FLOWCHART (PART 1) 





FEATURES 


1. Search functionality: API 
search request 


2. Results with pagination 


3. Display recipe 


Mark selected result 


User searches Load search Render search | an... User selects 
results results | Bind recipe 
handler 3 


Other features later User clicks — 5 Render pagination Page loads 
pagination 4 0 rr" buttons with recipe ID 
Bind handler 
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WnY WORRY ABOUT ARCHITECTURE? 





@ (ikea house. software The perfect architecture 


needs a structure: the way 
we organize our code 
“ We can create our own 


architecture (Mapty project) 





STRUCTURE 
“ We can use a well-established 


architecture pattern like MVC, 
MVP Flux, etc. (this project) 


Z- We can use a framework like 
React, Angular, Vue, Svelte, etc. 





MAINTAINABILITY EXPANDABILITY qe» A wv B 


& A project is never done! 
We need to be able to easily 
change it in the future 


< We also need to be able to 
easily add new features 


COMPONENTS OF ANY ARCHITECTURE 





BUSINESS LOGIC STATE HTTP LIBRARY APPLICATION LOGIC PRESENTATION LOGIC 





(ROUTER) (UI LAYER) 
< Code that solves < Essentially stores < Responsible for < Code that Is only < Code that Is 
the actual business all the data about making and concerned about concerned about 
problem; the application receiving AJAX the implementation the visible part of 
| requests of application itself: the application 
< Directly related to < Should be the 
what business does “single source of < Optional but almost < Handles navigation < Essentially displays 
and what It needs; truth” always necessary In and UI events application state 
| | real-world apps 
< Example: sending < Ul should be Kept tn 
messages, storing sync with the state 





transactions, 


| < State libraries exist 
calculating taxes, … 


ES Keeping In sync 


Int MODEL-VIEW-CONTROLLER (MVG) ARCHITECTURE 





BUSINESS LOGIC APPLICATION LOGIC PRESENTATION LOGIC 


STATE < Bridge between model 
and views (which don't 


know about one another) 
HTTP LIBRARV 
X Handles Ul events and 


dispatches tasks to —> Connected by function call and import 
model and view ruan > Data flow 





MODEL, VIEW AND CONTROLLER IN FORKIFY (RECIPE DISPLAY ONLY) 





o TT © 7 o 7 EI 
ASYNC 
recipe f 


Page loads ` 
with recipe ID 








MVC IMPLEMENTATION (RECIPE DISPLAY ONLY) GT lovely 





4 A recipe data A : 
model, js controller.js (goes through RecipeView 


controller) 


1 controlRecipes() — : 
—i | 


Program User clicks 
starts search result 


export loadRecipe() d 0 











export state 


| 
bookmarks || 











passing 
controlRecipe() 
function as handler 


— Function call 
LT » Data flow 
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EVENT HANDLING IN MVC: PUBLISHER-SUBSCRIBER PAT TERN GD (orkity 





Code that wants to 


l l Code that knows when 
react: SUBSCRIBER Module controller.js Class RecipeView Pa to react: PUBLISHER 
T6 JV A 
Function call 2 addHandlerRender() 3 
N Gee e 


A() — B Subscribe to publisher by passing In 
Program 0 


the subscriber function 
L T is B e . : 
Ex Z- controlRecipes will be passed into addHandlerRender when program starts 














A(X) — X Z- addHandlerRender listens for events (addEventListener), and uses 
controlRecipes as callback 


< Events should be handled in the controller (otherwise we would have application logic in the view) 


< Events should be listened for in the view (otherwise we would need DOM elements in the controller) 
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IMPROVEMENT AND FEATURE IDEAS: CHALLENGES & 








Display number of pages between the pagination buttons; 
& Ability to sort search results by duration or number of ingredients; 


< Perform ingredient validation in view, before submitting the form; 





Improve recipe ingredient input: separate in multiple fields and allow more 
than 6 ingredients; 





Shopping list feature: button on recipe to add ingredients to a list; 








Weekly meal planning feature: assign recipes to the next 7 days and show 
on a weekly calendar; 


= Get nutrition data on each ingredient from spoonacular API (https:// 
spoonacular.com/food-api) and calculate total calories of recipe. 





